<template>
  <div id="user-info">
    <h3>
      <van-icon
        name="arrow-left"
        color="rgb(107, 107, 107)"
        @click="routerGoBack"
      />
      <span class="set">
        <span>个人信息</span>
        <span @click="changeUserInfo">设置</span>
      </span>
    </h3>
    <div class="content">
      <div class="item">
        <span>头像</span>
        <span>
          <img class="user-pic" :src="imgurl" />
        </span>
      </div>
      <div class="item">
        <span>昵称</span>
        <span>
          <span>{{ userNickName }}</span>
        </span>
      </div>
      <div class="item">
        <span>性别</span>
        <span v-show="checked == '1'">男</span>
        <span v-show="checked == '2'">女</span>
      </div>
      <div class="item">
        <span>地址</span>
        <span>{{ areaListSelectValue }}</span>
      </div>
    </div>
    <div class="set-user-info">
      <!-- v-model="$store.state.login.isLogin" -->
      <van-popup
        v-model="writeUserInfo"
        teleport="#user-info"
        round
        :style="{ height: '50%', width: '80%', paddingTop: '40px' }"
      >
        <van-field
          v-model="userNickName"
          label="昵称"
          placeholder="请输入昵称"
          autofocuss
        />
        <van-field name="uploader" label="个人头像">
          <template #input>
            <van-uploader
              multiple
              :max-count="1"
              :after-read="afterRead"
              v-model="userShowImg"
            />
          </template>
        </van-field>
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="checked" direction="horizontal">
              <van-radio name="1" checked-color="rgb(100, 242, 112)"
                >男</van-radio
              >
              <van-radio name="2" checked-color="rgb(100, 242, 112)"
                >女</van-radio
              >
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="area"
          :value="areaListSelectValue"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup
          v-model="showArea"
          position="bottom"
          get-container=".set-user-info"
        >
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <p class="summit"><button @click="summitUserInfo">提交</button></p>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { compressImage } from "@/assets/js/compressImage";
import { areaList } from "@vant/area-data";
import WebIM from "../../utils/WebIM";
import { toast } from "vant";
export default {
  data() {
    return {
      userPhone: this.$route.params.userPhone,
      imgurl: this.$route.params.imgurl,
      userNickName: this.$route.params.userNickName,
      writeUserInfo: false,
      userShowImg: [],
      cacheImg: "",
      // 用户性别
      checked: "1",
      areaListSelectValue: "广东省/广州市/白云区",
      areaList,
      // 用户地区选择是否弹出
      showArea: false,
    };
  },
  methods: {
    routerGoBack() {
      this.$router.go(-1);
    },
    changeUserInfo() {
      this.writeUserInfo = true;
    },
    afterRead(file) {
      let config = {
        width: 20, // 压缩后图片的宽
        height: 20, // 压缩后图片的高
        quality: 1, // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
      };
      //调用压缩方法

      compressImage(file.file, config).then((result) => {
        this.cacheImg = result;
      });
    },

    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    summitUserInfo() {
      let obj = {
        phone: this.userPhone,
        nickname: this.userNickName,
        avatarurl: this.cacheImg,
        gender: this.checked,
        ext: JSON.stringify({
          address: this.areaListSelectValue,
        }),
      };
      WebIM.conn.updateUserInfo(obj).then((res) => {
        toast.success("修改成功");
        this.imgurl = this.cacheImg;
        this.writeUserInfo = false;
        let obj = {
          phone: this.userPhone,
          avatarurl: this.cacheImg,
          nickname: this.userNickName,
        };
        this.$store.commit("setUserInfo", obj);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#user-info {
  width: 100vw;
  height: 100vh;
  color: #fff;
  background-color: var(--theme-background-black);
  h3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    background-color: rgb(67 67 67);
    .set {
      width: 60%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      color: #eee;
    }
  }

  .content {
    color: rgb(107, 107, 107);
    .item {
      padding: 10px 15px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .user-pic {
        width: 50px;
        border-radius: 10px;
        margin-right: 5px;
      }

      img {
        margin-left: 8px;
      }
    }
  }

  .summit {
    text-align: center;
    width: 100%;
    button {
      width: 80%;
      padding: 15px;
      color: #fff;
      border: 0px solid #000;
      border-radius: 15px;
      background-color: var(--theme-green);
    }
  }
}
</style>